<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'
import Header from '../components/Header.vue'

// 用户数据
const userData = ref({
  name: '张文聪'
})

</script>

<template>
  <!-- 引用 Header 组件 -->
  <Header :user="userData" />

  <!-- 主要内容区域 - 使用插槽 -->  
  <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <!-- 默认插槽 -->
    <slot>
      
    </slot>

    <!-- 页脚插槽 -->
    <slot name="footer">
      <footer class="mt-8 pt-8 border-t border-gray-200">
        <p class="text-center text-gray-500 text-sm">
          &copy; 2025 我的应用. 保留所有权利.
        </p>
      </footer>
    </slot>
  </main>
</template>

<style scoped>
.tool-card {
  transition: all 0.3s ease;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}
</style>